<template>
      <div class="com-container ">
        <div class="com-chart hot" ref='hot_ref'></div>
          <span class="iconfont icon-left" @click="toLeft" >◀</span>
          <span class="iconfont icon-right" @click="toRight" >▶</span>
          <span class="cate-name" :style="conStyle">{{ catName }}</span>
        </div>
</template>

<script>
import { mapState } from 'vuex'


export default {
    name:'maps',
      data() {
        return {
            chartsInstance:null,
            allData:null,
            currentIndex:0, // 一级分类
            titleFontSize:0 // 自适应宽度
        }
    },
     created() {
         this.$socket.registerCallBack('hotData', this.getData) 
    },
    mounted() {
        this.initCharts()
        // this.getData()
         this.$socket.send({
            action:'getData',
            socketType:'hotData',
            chartName:'hotproduct',
            value:''
        })
        window.addEventListener('resize',this.screenAdapter)
        this.screenAdapter()
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.screenAdapter)
        clearInterval(this.timerId)
         this.$socket.unregisterCallBack('hotData') 
    },
    computed:{
      ...mapState('theme'),
     catName(){
       if(!this.allData){
         return ''
       }else{
         return this.allData[this.currentIndex].name
       }
     },
     conStyle(){
       return {
         fontSize:this.titleFontSize+'px'
       }
     }
    },
    methods: {
        initCharts(){
            this.chartsInstance = this.$echarts.init(this.$refs.hot_ref,'chalk')
            const initOpt={
              title:{
                text:'热销商品占比',
                left:20,
                top:20
              },
              legend:{
                top: '15%',
                icon:'circle'
              },
              tooltip:{
                show:true,
                formatter(arg){
                  let thridcategory = arg.data.children
                  let total = 0
                  thridcategory.forEach(v=>{
                    // 计算总金额
                    total += v.value 
                  })
                  // 格式化字符
                  let retStr = ''
                  thridcategory.forEach(v=>{
                    retStr+= `
                      ${v.name}:${parseInt(v.value/total*100)}%<br>
                    `
                  })
                  return retStr
                }
              },
              series:{
                  type:'pie',
                  label:{
                    show:false
                  },
                  emphasis:{
                    label:{
                      show:true
                    },
                    labelLine:{
                      show:false
                    }
                  }
              }
            }
            this.chartsInstance.setOption(initOpt)
        },
       async getData(){
            const {data:res} = await this.$http.get('hotproduct')
           this.allData = res
           console.log(res);
            // 更新
            this.updateCharts()
        },
        updateCharts(){
            const legenData = this.allData[this.currentIndex].children.map(v=>{
                return v.name
            })
            const seriesData = this.allData[this.currentIndex].children.map(v=>{
                return {
                    name:v.name,
                    value:v.value,
                    children:v.children // 提供给tooltip 
                }
            })

         
            const dataOpt={
            legend:{
                data:legenData,
      
            },
             series:{
                 data:seriesData
             }
            }
            this.chartsInstance.setOption(dataOpt)
        },
        screenAdapter(){
             this.titleFontSize = this.$refs.hot_ref.offsetWidth / 100 * 3 // 标题文字大小
   
            // 屏幕适配
            const adapterOpt={
              title:{
                textStyle:{
                  fontSize:this.titleFontSize
                }
              },
              legend:{
                itemWidth:this.titleFontSize,
                itemHeight:this.titleFontSize,
                itemGap:this.titleFontSize,
                itemStyle:{
                  fontSize:this.titleFontSize
                }
              },
              series:{
                radius:this.titleFontSize*4.5,
                center:['50%','60%']
              }
           
            }
            this.chartsInstance.setOption(adapterOpt)
            this.chartsInstance.resize()
        },

        toLeft(){
          // 向左
          this.currentIndex--
          if(this.currentIndex<0){
            this.currentIndex = this.allData.length - 1
          }
          this.updateCharts()
        },
        toRight(){
          // 向右
          this.currentIndex++
          if(this.currentIndex>this.allData.length-1){
            this.currentIndex = 0
          }
          this.updateCharts()
        }
    },
     watch:{
        theme(){
            console.log('主题切换了');
            this.chartInstance.dispose() // 销毁图表对象
            this.initCharts() // 初始化图表对象
            this.screenAdapter() // 屏幕适配
            this.updateCharts() // 跟新图表
        }
    }
}
</script>

<style lang="less" scoped>

.com-container {
  span {
    z-index: 999;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    cursor: pointer;
    color: #fff;
    font-size: 40px;
  }
  span.icon-left {
    left: 10%;
  }
  span.icon-right {
    right: 10%;
  }
  .cate-name {
    position: absolute;
    right: 10%;
    top: 600px;
    z-index: 999;
  }
}
</style>